<template>
	<view class="">
		<view class="nav">
			<view class="" @click="openMenu">
				<view class="" :style="{background:bgco}">
					<view class="nava" v-if="flag">
						<view class="title">{{title}}</view>
						<u-icon name="arrow-down" color="#333" size="26rpx"></u-icon>
					</view>
					<view class="nava navb" v-else>
						<view class="titlea" :style="{color:color}">{{name}}</view>
						<view class="" style="width: 26upx;" @click.stop="carMenu">
							<u-icon name="close-circle" color="#333" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="menu">
				 <u-transition :show="show" mode="fade">
					<view class="menua">
						<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y">
							<view class="menua_item" v-for="(item,index) in menu_list" :key="index"
								@click="selectMenu(item)">
								{{keyName?item[keyName]:item}}
							</view>
						</scroll-view>
					</view>
				</u-transition>
			</view>
		</view>
	</view>

	<!-- 	使用
	<selectMenu :menu_list="arr" keyName="name" @selectMenu='selectMenu' bgco='#F8F8F8' color='#23D371'>
	</selectMenu> -->
</template>

<script>
	/*
	 * @param {title,Srting} 默认提示文字
	 * @param {keyName,Srting} 选择的属性名称
	 * @param {menu_list,Srting} 选择的数组
	 * @param {bgco,Srting} 背景颜色
	 * @param {color,Srting} 选择文字的颜色
	 */
	export default {
		props: {
			title: {
				default: '请选择排序'
			},
			keyName: {
				default: ''
			},
			menu_list: {
				default: []
			},
			bgco: {
				default: '#F1F2F4'
			},
			color: {
				default: '#333'
			}
		},
		components: {},
		data() {
			return {
				show: false,
				flag: true,
				name: '',
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			openMenu() { //打开下拉选择
				this.show = !this.show
			},
			selectMenu(item) { //选择
				console.log(item);
				this.$emit('selectMenu', item)
				this.name = this.keyName ? item[this.keyName] : item
				this.show = false
				this.flag = false
			},
			carMenu() { //删除
				this.$emit('carMenu')
				this.name = null
				this.flag = true
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		align-items: center;
		border-radius: 8upx;
		position: relative;

		.nava {
			display: flex;
			align-items: center;
			border-radius: 8upx;
			padding: 2upx 14upx;
			// background-color: #F1F2F4;
			min-width: 100upx;

			.title {
				color: #333;
				font-size: 24upx;
				margin-right: 12upx;
			}

			.titlea {
				font-size: 24upx;
				margin-right: 12upx;
				text-align: center;
				flex: 1;
			}
		}

		.navb {
			justify-content: space-between;
		}

		.menu {
			position: absolute;
			left: 0upx;
			top: 40upx;

			.menua {
				border-radius: 8upx;
				background-color: #fff;
				width: 150upx;
				margin: 10upx 0;

				.scroll-Y {
					min-height: 40upx;
					max-height: 300upx;
				}

				.menua_item {
					padding: 10upx 0;
					font-size: 24upx;
					color: #333;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
</style>
